<template>
    <div class="goods-detail">
      <!-- 属性 -->
      <ul class="attrs">
        <li v-for="item in detail.properties" :key="item.name">
          <span class="dt">{{item.name}}</span>
          <span class="dd">{{item.value}}</span>
        </li>
      </ul>
      <!-- 图片 -->
      <img v-for="item in detail.pictures" v-lazy="item" :key="item">
    </div>
  </template>

<script setup name="GoodsDetail">
import { defineProps } from 'vue'
defineProps({
  detail: {
    type: Object,
    default: () => {}
  }
})
</script>

  <style scoped lang="less">
  .goods-detail {
    padding: 40px;
    .attrs {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 30px;
      li {
        display: flex;
        margin-bottom: 10px;
        width: 100%;
        .dt {
          width: 100px;
          color: #999;
        }
        .dd {
          flex: 1;
          color: #666;
        }
      }
    }
    > img {
      width: 100%;
    }
  }
  </style>